<div class='dashboard-banner-container' data-page="chain-details">
  <div class="container">
    <div class="dashboard-banner">
      <!-- Graph and legend -->
      <div class="dashboard-banner-network-graph">
        <!-- Graph -->
        <div class="dashboard-banner-chart">
          <div hidden data-chart-loading-message class="tile tile-muted text-center mt-5">
            <span class="loading-spinner-small mr-2">
              <span class="loading-spinner-block-1"></span>
              <span class="loading-spinner-block-2"></span>
            </span>
            <%= gettext("Loading chart") %>...
          </div>
          <button data-chart-error-message class="alert alert-danger col-12 text-left mt-5" style="display: none;">
            <span><%= gettext("There was a problem loading the chart.") %></span>
          </button>
          <canvas data-chart="marketHistoryChart" data-market_history_chart_path="<%= @chart_data_path %>" width="350" height="152" style="display: none;"></canvas>
        </div>
        <!-- Legend -->
        <div class="dashboard-banner-chart-legend">
          <div class="dashboard-banner-chart-legend-item">
            <span class="dashboard-banner-chart-legend-label">
              <%= gettext "Price" %>
            </span>
            <span class="dashboard-banner-chart-legend-value" data-selector="exchange-rate" data-wei-value="<%= Explorer.Chain.Wei.from(Decimal.new(1), :ether).value %>" data-usd-exchange-rate="<%= @exchange_rate.usd_value %>">
            </span>
          </div>
          <div class="dashboard-banner-chart-legend-item">
            <span class="dashboard-banner-chart-legend-label">
              <%= gettext "Market Cap" %>
            </span>
            <span class="dashboard-banner-chart-legend-value" data-selector="market-cap" data-usd-value="<%= market_cap(@market_cap_calculation, @exchange_rate) %>">
            </span>
          </div>
        </div>
      </div>
      <!-- Stats -->
      <div class="dashboard-banner-network-plain-container">
        <div class="dashboard-banner-network-stats">
          <%= case @average_block_time do %>
            <% {:error, :disabled} -> %>
              <%= nil %>
            <% average_block_time -> %>
              <div class="dashboard-banner-network-stats-item dashboard-banner-network-stats-item-1">
                <span class="dashboard-banner-network-stats-label">
                  <%= gettext "Average block time" %>
                </span>
                <span class="dashboard-banner-network-stats-value" data-selector="average-block-time">
                  <%= Timex.format_duration(average_block_time, Explorer.Counters.AverageBlockTimeDurationFormat) %>
                </span>
              </div>
          <% end %>
          <div class="dashboard-banner-network-stats-item dashboard-banner-network-stats-item-2">
            <span class="dashboard-banner-network-stats-label">
              <%= gettext "Total transactions" %>
            </span>
            <span class="dashboard-banner-network-stats-value" data-selector="transaction-count">
              <%= BlockScoutWeb.Cldr.Number.to_string!(@transaction_estimated_count, format: "#,###") %>
            </span>
          </div>
          <div class="dashboard-banner-network-stats-item dashboard-banner-network-stats-item-3">
            <span class="dashboard-banner-network-stats-label">
              <%= gettext "Total blocks" %>
            </span>
            <span class="dashboard-banner-network-stats-value" data-selector="block-count">
              <%= BlockScoutWeb.Cldr.Number.to_string!(@block_count, format: "#,###") %>
            </span>
          </div>
          <div class="dashboard-banner-network-stats-item dashboard-banner-network-stats-item-4">
            <span class="dashboard-banner-network-stats-label">
              <%= gettext "Wallet addresses" %>
            </span>
            <span class="dashboard-banner-network-stats-value" data-selector="address-count">
              <%= BlockScoutWeb.Cldr.Number.to_string!(@address_count, format: "#,###") %>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<section class="container">
  <div class="card card-chain-blocks">
    <div class="card-body">
      <%= link(gettext("View All Blocks"), to: block_path(BlockScoutWeb.Endpoint, :index), class: "btn-line float-right") %>
      <h2 class="card-title"><%= gettext "Blocks" %></h2>
      <div class="row" data-selector="chain-block-list" data-url="<%= chain_blocks_path(@conn, :chain_blocks) %>">
        <button data-selector="error-message" class="alert alert-danger col-12 text-left" style="display: none;">
          <span class="alert-link">
            <%= gettext "Something went wrong, click to reload." %>
          </span>
        </button>
         <div hidden data-selector="loading-message" class="col-lg-3" >
         <div data-selector="chain-block">
         <div class="tile tile-type-block n-p d-flex flex-column">
         <a class="tile-title"><span class="tile-loader tile-label-loader"></span> </a>
         <div class="tile-bottom-contents">
         <div class="dark-block-loader"></div>
         <div class="dark-block-loader"></div>
         </div>
        </div>
        </div>
        </div>
         <div hidden data-selector="loading-message" class="col-lg-3" >
         <div data-selector="chain-block">
         <div class="tile tile-type-block n-p d-flex flex-column">
         <a class="tile-title"><span class="tile-loader tile-label-loader"></span> </a> 
         <div class="tile-bottom-contents">
         <div class="dark-block-loader"></div>
         <div class="dark-block-loader"></div>
         </div>
        </div>
        </div>
        </div>
         <div hidden data-selector="loading-message" class="col-lg-3" >
         <div data-selector="chain-block">
         <div class="tile tile-type-block n-p d-flex flex-column">
         <a class="tile-title"><span class="tile-loader tile-label-loader"></span> </a> 
         <div class="tile-bottom-contents">
         <div class="dark-block-loader"></div>
         <div class="dark-block-loader"></div>
         </div>
        </div>
        </div>
        </div>
         <div hidden data-selector="loading-message" class="col-lg-3" >
         <div data-selector="chain-block">
         <div class="tile tile-type-block n-p d-flex flex-column">
         <a class="tile-title"><span class="tile-loader tile-label-loader"></span> </a>
         <div class="tile-bottom-contents">
        <div class="dark-block-loader"></div>
         <div class="dark-block-loader"></div>
         </div>
        </div>
        </div>
        </div>   
      </div>
    </div>
  </div>

  <div class="card card-chain-transactions">
    <div class="card-body">
      <%= link(gettext("View All Transactions"), to: transaction_path(BlockScoutWeb.Endpoint, :index), class: "btn-line float-right") %>
      <h2 class="card-title lg-card-title"><%= gettext "Transactions" %></h2>
      <div data-selector="channel-batching-message" style="display: none;">
        <div data-selector="reload-button" class="alert alert-info">
          <a href="#" class="alert-link"><span data-selector="channel-batching-count"></span> <%= gettext "More transactions have come in" %></a>
        </div>
      </div>
      <span data-selector="transactions-list" data-transactions-path="<%= @transactions_path %>">
        <button data-selector="error-message" class="alert alert-danger col-12 text-left" style="display: none;">
          <span class="alert-link">
            <%= gettext "Something went wrong, click to retry." %>
          </span>
        </button>
        <div hidden data-selector="loading-message">
          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
        </div>
      </span>
    </div>
  </div>
</section>
